<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<base href="<%=basePath%>">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
	<script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>
	<script type="text/javascript">
		$(function(){

			$('.mydate').datetimepicker({
				language:'zh-CN',
				format:'yyyy-mm-dd',
				minView:'month',
				initialDate:new Date(),
				autoclose:true,
				todayBtn:true,
				clearBtn:true
			});

			$('#cancelBtn').click(function () {
				window.history.back();
			});

			$('#showSearchActivityModalBtn').click(function () {
				$('#searchActivityTxt').val('');

				$.ajax({
					url: 'workbench/transaction/queryActivityByName.do',
					dataType: 'json',
					type: 'post',
					success: function (res) {

						$('#activitTbody').empty();

						var htmlStr = '';

						$.each(res, function (i, n) {
							htmlStr += '<tr>';
							htmlStr += '<td><input type="radio" name="activity" value="' + n.id + '"/></td>';
							htmlStr += '<td>' + n.name + '</td>';
							htmlStr += '<td>' + n.startDate + '</td>';
							htmlStr += '<td>' + n.endDate + '</td>';
							htmlStr += '<td>' + n.owner + '</td>';
							htmlStr += '</tr>';
						});

						$('#activityTbody').html(htmlStr);
						$('#findMarketActivity').modal('show');
					}
				});
			});

			$('#activityTbody').on('click','input',function () {
				$('#create-activitySrc').val($(this).parent().next().html());
				$('#activityId').val($(this).val());
				$('#findMarketActivity').modal('hide');
			});

			$('#searchActivityTxt').keyup(function () {
				var activityName = $(this).val();

				$.ajax({
					url: 'workbench/transaction/queryActivityByName.do',
					data: {
						activityName:activityName
					},
					dataType: 'json',
					type: 'post',
					success: function (res) {

						$('#activitTbody').empty();

						var htmlStr = '';

						$.each(res, function (i, n) {
							htmlStr += '<tr>';
							htmlStr += '<td><input type="radio" name="activity" value="' + n.id + '"/></td>';
							htmlStr += '<td>' + n.name + '</td>';
							htmlStr += '<td>' + n.startDate + '</td>';
							htmlStr += '<td>' + n.endDate + '</td>';
							htmlStr += '<td>' + n.owner + '</td>';
							htmlStr += '</tr>';
						});

						$('#activityTbody').html(htmlStr);
						$('#findMarketActivity').modal('show');
					}
				});
			});

			$('#showSearchContactsModalBtn').click(function () {
				$('#searchContactsTxt').val('');

				$.ajax({
					url: 'workbench/transaction/queryContactsByName.do',
					dataType: 'json',
					type: 'post',
					success: function (res) {

						$('#contactsTbody').empty();

						var htmlStr = '';

						$.each(res, function (i, n) {
							htmlStr += '<tr>';
							htmlStr += '<td><input type="radio" name="contacts" value="' + n.id + '"/></td>';
							htmlStr += '<td>' + n.fullname + '</td>';
							htmlStr += '<td>' + n.email + '</td>';
							htmlStr += '<td>' + n.mphone + '</td>';
							htmlStr += '</tr>';
						});

						$('#contactsTbody').html(htmlStr);
						$('#findContacts').modal('show');
					}
				});
			});

			$('#contactsTbody').on('click','input',function () {
				$('#create-contactsName').val($(this).parent().next().html());
				$('#contactsId').val($(this).val());
				$('#findContacts').modal('hide');
			});

			$('#searchContactsTxt').keyup(function () {
				var name = $(this).val();

				$.ajax({
					url: 'workbench/transaction/queryContactsByName.do',
					data: {
						name:name
					},
					dataType: 'json',
					type: 'post',
					success: function (res) {

						$('#contactsTbody').empty();

						var htmlStr = '';

						$.each(res, function (i, n) {
							htmlStr += '<tr>';
							htmlStr += '<td><input type="radio" name="contacts" value="' + n.id + '"/></td>';
							htmlStr += '<td>' + n.fullname + '</td>';
							htmlStr += '<td>' + n.email + '</td>';
							htmlStr += '<td>' + n.mphone + '</td>';
							htmlStr += '</tr>';
						});

						$('#contactsTbody').html(htmlStr);
						$('#findContacts').modal('show');
					}
				});
			});

			$('#create-transactionStage').change(function () {
				var stageValue = $(this).find('option:selected').html();

				if(stageValue==null||stageValue==''){
					$('#create-possibility').val('');
					return;
				}

				$.ajax({
					url:'workbench/transaction/getPossibilityByStage.do',
					data:{
						stageValue:stageValue
					},
					dataType:'json',
					type:'post',
					success:function (res) {
						$('#create-possibility').val(res);
					}
				});
			});

			$('#create-accountName').typeahead({
				source:function (jquery,process) {
					$.ajax({
						url:'workbench/transaction/queryAllCustomerNameByName.do',
						data:{
							customerName:jquery
						},
						dataType:'json',
						type:'post',
						success:function (res) {
							process(res);
						}
					});
				}
			});

			$('#saveCreateTranBtn').click(function () {
				var owner = $('#create-transactionOwner').val();
				var money = $.trim($('#create-amountOfMoney').val());
				var name = $.trim($('#create-transactionName').val());
				var expectedDate = $('#create-expectedClosingDate').val();
				var customerName = $('#create-accountName').val();
				var stage = $('#create-transactionStage').val();
				var type = $('#create-transactionType').val();
				var source = $('#create-source').val();
				var activityId = $('#activityId').val();
				var contactsId = $('#contactsId').val();
				var description = $('#create-describe').val();
				var contactSummary = $('#create-contactSummary').val();
				var nextContactTime = $('#create-nextContactTime').val();

				if(owner==null||owner==''){
					alert('所有者不能为空');
					return;
				}

				if(name==null||name==''){
					alert('名称不能为空');
					return;
				}

				if(expectedDate==null||expectedDate==''){
					alert('预计成交日期不能为空');
					return;
				}

				if(customerName==null||customerName==''){
					alert('客户名称不能为空');
					return;
				}

				if(stage==null||stage==''){
					alert('阶段不能为空');
					return;
				}

				$.ajax({
					url:'workbench/transaction/saveCreateTran.do',
					data:{
							owner:owner,
							money:money,
							name:name,
							expectedDate:expectedDate,
							customerName:customerName,
							stage:stage,
							type:type,
							source:source,
							activityId:activityId,
							contactsId:contactsId,
							description:description,
							contactSummary:contactSummary,
							nextContactTime:nextContactTime
					},
					dataType:'json',
					type:'post',
					success:function (res) {
						if(res.code=='0'){
							alert(res.message);
						}else if(res.code=='1'){
							window.history.back();
						}
					}
				});
			});
		});
	</script>
</head>
<body>

	<!-- 查找市场活动 -->	
	<div class="modal fade" id="findMarketActivity" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找市场活动</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input type="text" class="form-control" style="width: 300px;" placeholder="请输入市场活动名称，支持模糊查询" id="searchActivityTxt">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable3" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>开始日期</td>
								<td>结束日期</td>
								<td>所有者</td>
							</tr>
						</thead>
						<tbody id="activityTbody">
							<%--<tr>
								<td><input type="radio" name="activity"/></td>
								<td>发传单</td>
								<td>2020-10-10</td>
								<td>2020-10-20</td>
								<td>zhangsan</td>
							</tr>
							<tr>
								<td><input type="radio" name="activity"/></td>
								<td>发传单</td>
								<td>2020-10-10</td>
								<td>2020-10-20</td>
								<td>zhangsan</td>
							</tr>--%>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<!-- 查找联系人 -->	
	<div class="modal fade" id="findContacts" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找联系人</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input type="text" class="form-control" style="width: 300px;" placeholder="请输入联系人名称，支持模糊查询" id="searchContactsTxt">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>邮箱</td>
								<td>手机</td>
							</tr>
						</thead>
						<tbody id="contactsTbody">
							<%--<tr>
								<td><input type="radio" name="activity"/></td>
								<td>李四</td>
								<td>lisi@bjpowernode.com</td>
								<td>12345678901</td>
							</tr>
							<tr>
								<td><input type="radio" name="activity"/></td>
								<td>李四</td>
								<td>lisi@bjpowernode.com</td>
								<td>12345678901</td>
							</tr>--%>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	
	
	<div style="position:  relative; left: 30px;">
		<h3>创建交易</h3>
	  	<div style="position: relative; top: -40px; left: 70%;">
			<button type="button" class="btn btn-primary" id="saveCreateTranBtn">保存</button>
			<button type="button" class="btn btn-default" id="cancelBtn">取消</button>
		</div>
		<hr style="position: relative; top: -40px;">
	</div>
	<form class="form-horizontal" role="form" style="position: relative; top: -30px;">
		<div class="form-group">
			<label for="create-transactionOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-transactionOwner">
				  <c:forEach items="${requestScope.userList}" var="user">
					  <option value="${user.id}">${user.name}</option>
				  </c:forEach>
				</select>
			</div>
			<label for="create-amountOfMoney" class="col-sm-2 control-label">金额</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-amountOfMoney">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-transactionName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-transactionName">
			</div>
			<label for="create-expectedClosingDate" class="col-sm-2 control-label">预计成交日期<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control mydate" id="create-expectedClosingDate" readonly>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-accountName" class="col-sm-2 control-label">客户名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-accountName" placeholder="支持自动补全，输入客户不存在则新建">
			</div>
			<label for="create-transactionStage" class="col-sm-2 control-label">阶段<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
			  <select class="form-control" id="create-transactionStage">
			  	<option></option>
				  <c:forEach items="${requestScope.stageList}" var="stage">
					  <option value="${stage.id}">${stage.value}</option>
				  </c:forEach>
			  </select>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-transactionType" class="col-sm-2 control-label">类型</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-transactionType">
				  <option></option>
					<c:forEach items="${requestScope.transactionTypeList}" var="tranType">
						<option value="${tranType.id}">${tranType.value}</option>
					</c:forEach>
				</select>
			</div>
			<label for="create-possibility" class="col-sm-2 control-label">可能性</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-possibility" readonly>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-clueSource" class="col-sm-2 control-label">来源</label>
			<div class="col-sm-10" style="width: 300px;">
				<select class="form-control" id="create-clueSource">
				  <option></option>
					<c:forEach items="${requestScope.sourceList}" var="source">
						<option value="${source.id}">${source.value}</option>
					</c:forEach>
				</select>
			</div>
			<label for="create-activitySrc" class="col-sm-2 control-label">市场活动源&nbsp;&nbsp;<a href="javascript:void(0);" id="showSearchActivityModalBtn"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="hidden" id="activityId">
				<input type="text" class="form-control" id="create-activitySrc" readonly>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-contactsName" class="col-sm-2 control-label">联系人名称&nbsp;&nbsp;<a href="javascript:void(0);" id="showSearchContactsModalBtn"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="hidden" id="contactsId">
				<input type="text" class="form-control" id="create-contactsName" readonly>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-describe" class="col-sm-2 control-label">描述</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-describe"></textarea>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control mydate" id="create-nextContactTime" readonly>
			</div>
		</div>
		
	</form>
</body>
</html>